:host(:not([hidden])) {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	font-family: var(--sapFontFamily);
}

/* The ui5_hovered class is set by FileUploader to indicate hover state of the control */
:host(:not([hidden]).ui5_hovered) {
	opacity: .7;
}

:host([interactive]:not([disabled])) {
	cursor: pointer;
}

:host([interactive]:not([hidden]):active) {
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
}

:host([interactive]:not([hidden]):not([disabled]):not(:active):not([focused]):hover) {
	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
}

:host([interactive][desktop]:not([hidden])) .ui5-avatar-root:focus,
:host([interactive]:not([hidden])) .ui5-avatar-root:focus-visible {
	outline: var(--_ui5_avatar_outline);
	outline-offset: var(--_ui5_avatar_focus_offset);
}

:host([disabled]) {
	opacity: var(--sapContent_DisabledOpacity);
	pointer-events: none;
}

:host {
	height: 3rem;
	width: 3rem;
	border-radius: 50%;
	border: var(--ui5-avatar-initials-border);
	outline: none;
	color: var(--ui5-avatar-initials-color);
}

.ui5-avatar-root {
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	height: 100%;
	width: 100%;
	border-radius: inherit;
}

/* Sizes */
:host([_size="XS"]),
:host([size="XS"]) {
	height: 2rem;
	width: 2rem;
	min-height: 2rem;
	min-width: 2rem;
	font-size: var(--_ui5_avatar_fontsize_XS);
}

:host(:not([size])),
:host([_size="S"]),
:host([size="S"]) {
	min-height: 3rem;
	min-width: 3rem;
	font-size: var(--_ui5_avatar_fontsize_S);
}

:host([_size="M"]),
:host([size="M"]) {
	min-height: 4rem;
	min-width: 4rem;
	font-size: var(--_ui5_avatar_fontsize_M);
}

:host([_size="L"]),
:host([size="L"]) {
	min-height: 5rem;
	min-width: 5rem;
	font-size: var(--_ui5_avatar_fontsize_L);
}

:host([_size="XL"]),
:host([size="XL"]) {
	min-height: 7rem;
	min-width: 7rem;
	font-size: var(--_ui5_avatar_fontsize_XL);
}

/* Icon */
:host .ui5-avatar-icon {
	height: var(--_ui5_avatar_fontsize_S);
	width: var(--_ui5_avatar_fontsize_S);
	color: inherit;
}

:host([_size="XS"]) .ui5-avatar-icon,
:host([size="XS"]) .ui5-avatar-icon {
	height: var(--_ui5_avatar_icon_XS);
	width: var(--_ui5_avatar_icon_XS);
}

:host([_size="S"]) .ui5-avatar-icon,
:host([size="S"]) .ui5-avatar-icon {
	height: var(--_ui5_avatar_icon_S);
	width: var(--_ui5_avatar_icon_S);
}

:host([_size="M"]) .ui5-avatar-icon,
:host([size="M"]) .ui5-avatar-icon {
	height: var(--_ui5_avatar_icon_M);
	width: var(--_ui5_avatar_icon_M);
}

:host([_size="L"]) .ui5-avatar-icon,
:host([size="L"]) .ui5-avatar-icon {
	height: var(--_ui5_avatar_icon_L);
	width: var(--_ui5_avatar_icon_L);
}

:host([_size="XL"]) .ui5-avatar-icon,
:host([size="XL"]) .ui5-avatar-icon {
	height: var(--_ui5_avatar_icon_XL);
	width: var(--_ui5_avatar_icon_XL);
}

::slotted(*) {
	border-radius: 50%;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Shapes */
:host([shape="Square"]) {
	border-radius: var(--ui5-avatar-border-radius);
}

:host([shape="Square"]) ::slotted(*) {
	border-radius: calc(var(--ui5-avatar-border-radius) - var(--ui5-avatar-border-radius-img-deduction));
}

:host(:not([color-scheme])),
:host(:not([_has-image])),
:host([color-scheme="Auto"]), /* without [ui5-avatar] to be less specific than _color-scheme selectors */
:host([_color-scheme="Accent6"]),
:host([ui5-avatar][color-scheme="Accent6"]) {
	background-color: var(--ui5-avatar-accent6);
	color: var(--ui5-avatar-accent6-color);
	border-color: var(--ui5-avatar-accent6-border-color);
}
:host([_color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_6_Hover_Background);
}

:host([_color-scheme="Accent1"]),
:host([ui5-avatar][color-scheme="Accent1"]) {
	background-color: var(--ui5-avatar-accent1);
	color: var(--ui5-avatar-accent1-color);
	border-color: var(--ui5-avatar-accent1-border-color);
}

:host([_color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_1_Hover_Background);
}

:host([_color-scheme="Accent2"]),
:host([ui5-avatar][color-scheme="Accent2"]) {
	background-color: var(--ui5-avatar-accent2);
	color: var(--ui5-avatar-accent2-color);
	border-color: var(--ui5-avatar-accent2-border-color);
}

:host([_color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_2_Hover_Background);
}

:host([_color-scheme="Accent3"]),
:host([ui5-avatar][color-scheme="Accent3"]) {
	background-color: var(--ui5-avatar-accent3);
	color: var(--ui5-avatar-accent3-color);
	border-color: var(--ui5-avatar-accent3-border-color);
}

:host([_color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_3_Hover_Background);
}

:host([_color-scheme="Accent4"]),
:host([ui5-avatar][color-scheme="Accent4"]) {
	background-color: var(--ui5-avatar-accent4);
	color: var(--ui5-avatar-accent4-color);
	border-color: var(--ui5-avatar-accent4-border-color);
}

:host([_color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_4_Hover_Background);
}

:host([_color-scheme="Accent5"]),
:host([ui5-avatar][color-scheme="Accent5"]) {
	background-color: var(--ui5-avatar-accent5);
	color: var(--ui5-avatar-accent5-color);
	border-color: var(--ui5-avatar-accent5-border-color);
}

:host([_color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_5_Hover_Background);
}

:host([_color-scheme="Accent7"]),
:host([ui5-avatar][color-scheme="Accent7"]) {
	background-color: var(--ui5-avatar-accent7);
	color: var(--ui5-avatar-accent7-color);
	border-color: var(--ui5-avatar-accent7-border-color);
}

:host([_color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_7_Hover_Background);
}

:host([_color-scheme="Accent8"]),
:host([ui5-avatar][color-scheme="Accent8"]) {
	background-color: var(--ui5-avatar-accent8);
	color: var(--ui5-avatar-accent8-color);
	border-color: var(--ui5-avatar-accent8-border-color);
}

:host([_color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_8_Hover_Background);
}

:host([_color-scheme="Accent9"]),
:host([ui5-avatar][color-scheme="Accent9"]) {
	background-color: var(--ui5-avatar-accent9);
	color: var(--ui5-avatar-accent9-color);
	border-color: var(--ui5-avatar-accent9-border-color);
}

:host([_color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_9_Hover_Background);
}

:host([_color-scheme="Accent10"]),
:host([ui5-avatar][color-scheme="Accent10"]) {
	background-color: var(--ui5-avatar-accent10);
	color: var(--ui5-avatar-accent10-color);
	border-color: var(--ui5-avatar-accent10-border-color);
}

:host([_color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
:host([ui5-avatar][color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
	background-color: var(--sapAvatar_10_Hover_Background);
}

:host([_color-scheme="Placeholder"]),
:host([ui5-avatar][color-scheme="Placeholder"]) {
	background-color: var(--ui5-avatar-placeholder);
	color: var(--ui5-avatar-placeholder-color);
	border-color: var(--sapAvatar_Lite_BorderColor);
}

:host([_color-scheme="Transparent"]),
:host([ui5-avatar][color-scheme="Transparent"]) {
	background-color: transparent;
	border-color: transparent;
}

:host([_has-image]) {
	color: var(--ui5-avatar-accent10-color);
	border: var(--ui5-avatar-optional-border);
	background-color: transparent;
}

.ui5-avatar-initials {
	color: inherit;
}

.ui5-avatar-icon ~ .ui5-avatar-initials,
.ui5-avatar-icon ~ .ui5-avatar-icon-fallback {
	display: none;
}

.ui5-avatar-fallback-icon-hidden {
	display: none;
}

.ui5-avatar-initials-hidden {
	position: absolute;
	visibility: hidden;
	z-index: 0;
	pointer-events: none;
}

/* Slotted Badge */
::slotted([slot="badge"]) {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 1.125rem;
	height: 1.125rem;
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSmallSize);
	color: var(--sapBackgroundColor);

	--_ui5-tag-height: 1.125rem;
}

:host(:not([disabled])) ::slotted([slot="badge"]) {
	pointer-events: initial;
}

:host([_size="L"]) ::slotted([slot="badge"]),
:host([size="L"]) ::slotted([slot="badge"]) {
	width: 1.25rem;
	height: 1.25rem;

	--_ui5-tag-height: 1.25rem;
	--_ui5-tag-icon-width: 0.875rem;
}

:host([_size="XL"]) ::slotted([slot="badge"]),
:host([size="XL"]) ::slotted([slot="badge"]) {
	width: 1.75rem;
	height: 1.75rem;

	--_ui5-tag-height: 1.75rem;
	--_ui5-tag-icon-width: 1rem;
}

/* Slotted Badge - Square Avatar Shape */
:host([shape="Square"]) ::slotted([slot="badge"]) {
	bottom: -0.125rem;
	right: -0.125rem;
}

:host([_size="L"][shape="Square"]) ::slotted([slot="badge"]),
:host([size="L"][shape="Square"]) ::slotted([slot="badge"]) {
	bottom: -0.1875rem;
	right: -0.1875rem;
}

:host([_size="XL"][shape="Square"]) ::slotted([slot="badge"]),
:host([size="XL"][shape="Square"]) ::slotted([slot="badge"]) {
	bottom: -0.25rem;
	right: -0.25rem;
}